<template>
  <div class="margin-box">
    <div class="card-box">
      <div class="card-title">资料信息</div>
      <div class="batchImport-main">
        <div class="batchImport-steps">
          <el-steps :active="active" finish-status="success" align-center>
            <el-step title="第一步"></el-step>
            <el-step title="第二步"></el-step>
            <el-step title="第三步"></el-step>
          </el-steps>
          <div v-if="active === 0">
            <div class="step-first">
              <div class="el-icon-upload one ones"></div>
              <div class="step-first-text">
                <h2>填写导入的信息</h2>
                <p>请按照收据模板的格式准备导入数据，模板中的表头名称不可更改， 表头行不能删除，单次导入的数据不超过1000条。</p>
                <el-button class="el-icon-download two" type="info" @click="handleDownTemplate">下载模板</el-button>
              </div>
            </div>
            <div class="step-first step-first-last">
              <div class="el-icon-upload one"></div>
              <div class="step-first-text">
                <h2>上传填好的绩效考核导入表</h2>
                <p>请按照收据模板的格式准备导入数据，模板中的表头名称不可更改， 表头行不能删除，单次导入的数据不超过1000条。</p>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :limit="1"
                  action="/admin/sys-file/upLodeFileAdd"
                  :on-remove="handleRemove"
                  :on-change="file => {handleChange(file)}"
                  :auto-upload="false"
                >
                  <el-button class="el-icon-upload2 two" type="info">上传文件</el-button>
                </el-upload>
              </div>
            </div>
          </div>
          <div v-if="active === 1">
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
              <el-tab-pane name="first">
                <span slot="label">
                  <h3 style="font-weight: 500;">正常添加（{{batchImportTableData.successfulSize}}）</h3>
                </span>
                <el-table :data="batchImportTableData.successfulData" align="center" ref="multipleTable">
                  <el-table-column label="年度" prop="year"></el-table-column>
                  <el-table-column label="进驻公司名称" prop="companyName" width="200"></el-table-column>
                  <el-table-column label="进驻园区" prop="parkName"></el-table-column>
                  <el-table-column label="楼层" prop="floor"></el-table-column>
                  <el-table-column label="合同期限" prop="companyName" width="200">
                    <template slot-scope="scope">{{scope.row.contractStartTm}}-{{scope.row.contractEndTm}}</template>
                  </el-table-column>
                  <el-table-column label="租期" prop="leaseTerm"></el-table-column>
                  <el-table-column label="承租面积(m²)" prop="leaseArea" align="center"></el-table-column>
                  <el-table-column label="租金单价(元/月)" prop="rentPrice" width="100" align="center"></el-table-column>
                  <el-table-column label="月租金(元/月)" prop="monthRent" align="center"></el-table-column>

                  <el-table-column label="租金优惠" prop="rentConcession" width="200"></el-table-column>
                  <el-table-column label="进驻情况" prop="enterDesc"></el-table-column>
                  <el-table-column label="总部企业" prop="enterprise"></el-table-column>
                  <el-table-column label="登记注册地" prop="registeredAddress" width="200"></el-table-column>

                  <el-table-column label="纳税登记地" prop="taxPlace"></el-table-column>
                  <el-table-column label="纳税总额（万元）" prop="totalTax" align="center"></el-table-column>
                  <el-table-column label="创新成果投入（万元）" prop="innovativeResults" align="center"></el-table-column>
                  <el-table-column label="GDP贡献（万元）" prop="gdpContribute" align="center"></el-table-column>
                  <el-table-column label="是否上市企业" prop="isListCompany">
                    <template slot-scope="scope">{{scope.row.isListCompany==1?"是":"否"}}</template>
                  </el-table-column>
                  <el-table-column label="租金缴纳情况" prop="rentStatus"></el-table-column>
                  <el-table-column label="考核结果" prop="assessResult"></el-table-column>
                  <el-table-column label="备注" prop="remarks"></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane name="second">
                <span slot="label">
                  <h3 style="font-weight: 500;">异常情况（{{batchImportTableData.errorSize}}）</h3>
                </span>
                <div class="step-second">
                  <h3>异常提示：</h3>
                  <p v-for="(item,index) in batchImportTableData.errorData" :key="index">{{item.error}}</p>
                  <el-button class="step-second-btn" @click="handleDownError">导出异常数据</el-button>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div v-if="active === 2">
            <div class="step-third">
              <img :src="Smile" />
              <h2>批量导入完成</h2>
              <p>成功导入{{submitData}}条数据</p>
            </div>
          </div>
        </div>
        <div class="batchImport-btn">
          <el-button style="margin-top: 12px;" v-if="active == 1" @click="handleClickPrev">上一步</el-button>
          <el-button style="margin-top: 12px;" v-if="active == 0 || active == 1" @click="handleClicknext">下一步</el-button>
          <el-button style="margin-top: 12px;" v-if="active == 2" @click="handleClickSubmit">完成</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./import.js">
</script>

<style scoped lang="scss">
@import "./import";
</style>
